<template>
  <transition name="el-zoom-in-center">
    <div class="jsbos-preview-main">
      <div class="jsbos-common-page-header">
        <el-page-header @back="goBack" :content="content" />
        <div class="options">
          <!-- <el-button type="primary" @click="dataFormSubmit()"> 保 存</el-button> -->
          <el-button @click="goBack"> 取 消</el-button>
        </div>
      </div>
      <el-row
        :gutter="15"
        class="main"
        :style="{ margin: '0 auto', width: '100%' }"
      >
        <el-form
          ref="elForm"
          :model="dataForm"
          size="small"
          label-width="100px"
          label-position="right"
        >
          <template v-if="!loading">
            <el-col :span="9">
              <el-form-item label="问卷标题" prop="orderName">
                <p>{{ dataForm.orderName }}</p>
              </el-form-item>
            </el-col>
            <el-col :span="9">
              <el-form-item label="问卷编码" prop="orderCode">
                <p>{{ dataForm.orderCode }}</p>
              </el-form-item>
            </el-col>
            <el-col :span="9">
              <el-form-item label="问卷模板" prop="questionnaireName">
                <p>{{ dataForm.questionnaireName }}</p>
              </el-form-item>
            </el-col>
            <el-col :span="9">
              <el-form-item label="开放类型" prop="orderType">
                <p>{{ dataForm.orderType }}</p>
              </el-form-item>
            </el-col>
            <el-col :span="9">
              <el-form-item
                label="内部包含范围"
                prop="orderRange"
                v-if="dataForm.orderRange"
              >
                <p>{{ dataForm.orderRange }}</p>
              </el-form-item>
            </el-col>
            <el-col :span="9">
              <el-form-item label="开始日期" prop="orderStartDate">
                <p>{{ jsbos.dateFormat(dataForm.orderStartDate) }}</p>
              </el-form-item>
            </el-col>
            <el-col :span="9">
              <el-form-item label="结束日期" prop="orderEndDate">
                <p>{{ jsbos.dateFormat(dataForm.orderEndDate) }}</p>
              </el-form-item>
            </el-col>
            <el-col :span="9">
              <el-form-item label="有效标志" prop="enabledMark">
                <p>
                  {{ dataForm.enabledMark | dynamicText(enabledMarkOptions) }}
                </p>
              </el-form-item>
            </el-col>
            <el-col :span="9">
              <el-form-item label="创建用户" prop="creatorUserId">
                <p>{{ dataForm.creatorUserId }}</p>
              </el-form-item>
            </el-col>
            <el-col :span="9">
              <el-form-item label="创建时间" prop="creatorTime">
                <p>{{ dataForm.creatorTime }}</p>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="问卷调查描述" prop="description">
                <p>{{ dataForm.description }}</p>
              </el-form-item>
            </el-col>
          </template>
        </el-form>
      </el-row>
      <el-tabs
        v-model="activeName"
        @tab-click="handleClick"
        style="margin-left: 5px"
        type="card"
      >
        <el-tab-pane label="结果展示" name="first">
          <jsbos-table v-loading="listLoading" :data="list">
            <el-table-column
              prop="itemName"
              width="300px"
              label="标题"
              align="center"
            />
            <el-table-column
              prop="itemType"
              width="100px"
              label="类型"
              align="center"
            >
              <template slot-scope="scope">
                <el-tag v-if="scope.row.itemType == 'radio'"> 单选 </el-tag>
                <el-tag v-if="scope.row.itemType == 'multiSelect'"
                  >多选
                </el-tag>
                <el-tag v-if="scope.row.itemType == 'scoring'">打分 </el-tag>
                <el-tag v-if="scope.row.itemType == 'writing'">填报</el-tag>
              </template>
            </el-table-column>
            <el-table-column
              prop="questionItem"
              width="450px"
              label="选项"
              align="center"
            >
              <template slot-scope="scope">
                <div v-if="scope.row.itemType == 'radio'">
                  <el-radio-group v-model="scope.row.itemResult">
                    <el-radio-button
                      :label="item"
                      :key="item"
                      v-for="item in scope.row.questionItem"
                      disabled
                      >{{ item }}</el-radio-button
                    >
                  </el-radio-group>
                </div>
                <div v-if="scope.row.itemType == 'multiSelect'">
                  <el-checkbox-group v-model="scope.row.itemResult">
                    <el-checkbox-button
                      :label="item"
                      :key="item"
                      v-for="item in scope.row.questionItem"
                      disabled
                      >{{ item }}</el-checkbox-button
                    >
                  </el-checkbox-group>
                </div>
                <div v-if="scope.row.itemType == 'writing'">
                  <el-input
                    type="textarea"
                    :rows="1"
                    placeholder="请输入内容"
                    v-model="scope.row.itemResult"
                    disabled
                  >
                  </el-input>
                </div>
                <div v-if="scope.row.itemType == 'scoring'" disabled="true">
                  <el-rate v-model="scope.row.itemResult" show-text> </el-rate>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="150">
              <template slot-scope="scope">
                <el-button type="text" @click="goDetail(scope.row)"
                  >查看详情
                </el-button>
              </template>
            </el-table-column>
          </jsbos-table>
          <pagination
            :total="total"
            :page.sync="listQuery.currentPage"
            :limit.sync="listQuery.pageSize"
            @pagination="initResultData"
          />
        </el-tab-pane>
      </el-tabs>
      <ViewResults
        v-if="resultsVisible"
        ref="results"
        @refresh="resultsVisible = false"
      />
    </div>
  </transition>
</template>
<script>
import request from "@/utils/request";
import ViewResults from "./ViewResults.vue";
export default {
  components: { ViewResults },
  props: [],
  data() {
    return {
      resultsVisible: false,
      total: 0,
      listQuery: {
        currentPage: 1,
        pageSize: 20,
        sort: "desc",
        sidx: "creatorTime",
      },
      list: [],
      listLoading: true,
      activeName: "first",
      visible: false,
      loading: false,
      printBrowseVisible: false,
      printId: "",
      content: "调查结果",
      dataForm: {
        id: "",
        questionnaireId: "",
        orderName: "",
        orderCode: "",
        orderRange: [],
        orderStartDate: "",
        orderEndDate: "",
        enabledMark: "1",
        description: "",
        creatorUserId: "",
        creatorTime: "",
      },

      enabledMarkOptions: [
        { fullName: "有效", id: "1" },
        { fullName: "无效", id: "0" },
      ],
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    goDetail(row) {
      this.resultsVisible = true;
      this.$nextTick(() => {
        this.$refs.results.init(row);
      });
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    initResultData() {
      this.listLoading = true;
      let _query = {
        ...this.listQuery,
        questId: this.dataForm.questionnaireId,
      };
      request({
        url: `/api/questionnaire/OqQuestionnaireItem/getList`,
        method: "post",
        data: _query,
      }).then((res) => {
        this.list = [];
        for (let i = 0; i < res.data.list.length; i++) {
          if (res.data.list[i].itemType == "multiSelect") {
            res.data.list[i].itemResult = [];
          }
        }
        this.list = res.data.list;
        this.total = res.data.pagination.total;

        this.listLoading = false;
      });
      // this.listLoading = true;
      // let orderId = this.dataForm.id;
      // request({
      //   url:
      //     "/api/questionnaire/OqQuestionnaireOrder/getQuestionnaireResult/" +
      //     orderId,
      //   method: "get",
      // }).then((res) => {
      //   this.list = res.data;
      //   this.listLoading = false;
      // });
    },
    goBack() {
      this.$emit("refresh");
    },
    dataInfo(dataAll) {
      let _dataAll = dataAll;
      this.dataForm = _dataAll;
    },

    init(id) {
      this.dataForm.id = id || 0;
      this.visible = true;
      this.$nextTick(() => {
        if (this.dataForm.id) {
          this.loading = true;
          request({
            url:
              "/api/questionnaire/OqQuestionnaireOrder/detail/" +
              this.dataForm.id,
            method: "get",
          }).then((res) => {
            this.dataInfo(res.data);
            this.loading = false;
            this.initResultData();
          });
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.jsbos-preview-main {
  // height: 450px;
}
</style>
